<template>
  <div  class="n-card">

      <div class="n-card-thumb">
        <div class="card-checked float-left">
            <van-checkbox v-model="itemChecked" @click.native="selectChecked()"></van-checkbox>
        </div>
        <div class="card-img float-right">
            <img src="http://iph.href.lu/300x200" class="">
        </div>
      </div>
      <div class="n-content">
            <div class="n-card-desc">花仙子 红灯笼 复色 观果花卉种子花仙子 红灯笼 复色 观果花卉种子花仙子 红灯笼 复色 观果花卉种子  </div>
            <div class="n-card-row clear-both">
                <span class="float-right unit-price">单价：￥19.23</span>
            </div>
            <div class="n-card-row clear-both">
                <span class="price"> ￥19.23</span>
                <div class="n-setpper float-right">
                    <button
                    class="stepper-stepper  stepper-minus float-left"
                    :class="{ 'stepper-disabled': isMinusDisabled||clickShow=='minus' }"
                    @click="onChange($event,'minus')"
                    />
                    <div class="stepper-input float-left text-center">100</div>
                    <button
                    class="stepper-stepper stepper-plus float-left"
                    :class="{ 'stepper-disabled': isPlusDisabled||clickShow=='plus' }"
                    @click="onChange($event,'plus')"
                    />
                </div>
            </div>            
      </div>
  </div>

</template>

<script>

export default {
    props:{
        // prdList:{
        //     type:Array,
        //     default:[]
        //   },
    },
    data (){
        return {
            isMinusDisabled:false,
            isPlusDisabled:false,
            clickShow:'',
            itemChecked:false
        }
    },
    methods:{
        onChange (e,val){
            e.stopPropagation();
            let vm =this;
            vm.$emit('onChange',val);
            vm.clickShow=val;
            setTimeout(()=>{
                vm.clickShow=''
            },200);
        },
        selectChecked(){
            this.$emit('selectChecked',this.itemChecked);
            console.log(this.itemChecked);
        }
    }

}
</script>


<style scoped lang="scss">
.n-card{
    display: flex;
    color: #333;
    height: 2.8rem;
    font-size: .426667rem;
    background: #fff;
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: .26rem .266667rem .133333rem 4.4rem;
   
    .n-card-thumb{
        
        top: .133333rem;
        left: 0;
        width:4rem;
        position: absolute;
        .card-checked,.card-img{
            display: flex; 
            height: 2.5rem;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
        }
        .card-checked{
           margin-left:.4rem;
        }
        .card-img{
            width: 2.5rem;

            img{
                border: none;
                max-width: 100%;
                max-height: 100%;
            }
        }

    }
    .n-content{
        width:100%;
        padding:.133333rem 0;
        .n-card-desc{
            font-size:.373333rem;
            max-height: 1.066667rem;
            line-height:.533333rem;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .n-card-row{
            width:100%;
            margin-top:.2rem;
            .unit-price{
                font-size:.346667rem;
                margin-right:.133333rem;
            }
            .n-setpper{
                margin-right:.133333rem;
               .stepper-stepper,.stepper-input{
                    height: .666667rem;
                    line-height:.666667rem;
                    -webkit-box-sizing: border-box;
                    box-sizing: border-box;
                    background-color: #fff;
                    border: 1px solid #ccc;
                    position: relative;
                    vertical-align: middle;
               }
               .stepper-stepper{
                    width: .933333rem;
               }
               .stepper-input{
                   width: 1.066667rem;
                   border-left:0;
                   border-right:0;
                   font-size:.346667rem;
               }
               .stepper-plus::after, .stepper-stepper::before {
                    content: '';
                    position: absolute;
                    margin: auto;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    background-color: #6c6c6c;
                }
                .stepper-stepper::before {
                    width: 9px;
                    height: 1px;
                }
                .stepper-plus::after{
                    width: 1px;
                    height: 9px;
                }
                .stepper-disabled{
                    background-color: #f8f8f8;
                    border-color: #e8e8e8 #ccc #e8e8e8 #e8e8e8;
                }
            }
        }
    }
}

.price{
    line-height:.666667rem;
    font-size:.426667rem;
    color:#e4393c;
}
.prd-cart{
    font-size:.5rem;
    font-weight:bold;
    color:#e4393c;
}
</style>
